<template>
  <div>
    <div>
      <el-form inline>
        <el-form-item label="日期选择" style="width: 320px">
          <el-date-picker type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
            value-format="YYYY-MM-DD" placeholder="请选择创建时间" style="width: 320px" v-model="searchFrom.createdAt"
            @change="dateChange" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="DebounceGetTableList">搜索</el-button>
          <sj-button custom-type="sinfo" @click="DebounceResetting">重置</sj-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <pure-table class="mt-5" :data="tableData.data" :columns="initPureTableConfig(roleTableConfig)" 
        @selection-change="selectionChange" :isShowPag="false">
        <template #dealStatus="{ row }">
          <el-tag :type="HANDLESTATUSTEXT[row.dealStatus].type">
            {{ isNullOrEmpty( HANDLESTATUSTEXT[row.dealStatus].label ) }}
          </el-tag>
        
        </template>
        <template #action="{ row }">
          <el-space>
            <sj-link custom-type="sblue" :underline="false" @click="info(row)">查看</sj-link>
          </el-space>
        </template>
      </pure-table>
    </div>
    <div class="mt-5">
      <el-pagination v-model:current-page="searchFrom.page" v-model:page-size="searchFrom.limit" background
        :layout="PAGE_LAYOUT" :total="tableData.total" @size-change="getTableList" @current-change="getTableList" />
    </div>
  </div>
</template>
<script setup lang="ts">
import {isNullOrEmpty,initPureTableConfig} from '@/utils/functions'
import { debounce } from "@pureadmin/utils";
import { HANDLESTATUSTEXT } from "@/constant/alarm-mangenment"
import { defaultInfoForm } from "@/views/operate/alarm-management/alarm-log/index"
import { addDialog } from "@/components/ReDialog";
import { PAGE_LAYOUT } from '@/constant';
import { getInfo } from "@/api/screen/alarm/index";
import alarminfo from "@/views/large-data-screen/component/alarm/alarm-info.vue"
import { getAlarmRecordList } from "@/api/screen/index"
import { ref, reactive } from "vue";
const tableData = reactive({
  data: [],
  total: 0
});
const searchFrom = reactive({
  page: 1,
  limit: 10,
  createdAt: [],
  startDate: "",
  endDate: ""
});
const selectionData = ref([]);
const selectionChange = data => {
  selectionData.value = data;
};
const dateChange = e => {
  searchFrom.startDate = e[0];
  searchFrom.endDate = e[1];
};
const roleTableConfig = [
  { prop: "id", label: '编号', width:  100 },
  { prop: "alarmTitle", label: "告警说明",showOverflowTooltip:true  },
  { slot: "dealStatus", label: "处理状态" },
  { prop: "createdAt", label: "记录时间" , width: 180 },
  { slot: "action", label: "操作", width: 150,  }
];
const props = defineProps({
  deviceId: {
    type: String,
    default: ''
  }
})
const defaultSearchForm = () => {
  return {
    operatePlatform: "",
    createdAt: [],
    startDate: "",
    endDate: "",
    page: 1,
    limit: 10,
  }
}
// 重置搜索栏
const resetting = () => {
  //点击重置按键
  Object.assign(searchFrom, defaultSearchForm());
  getTableList();
};
// 获取列表数据
const getTableList = () => {
  getAlarmRecordList({ ...searchFrom, alarmType: 1, deviceId: props.deviceId }).then(res => {
    if (res.code === 200) {
      tableData.data = res.result.data;
      tableData.total = res.result.total;
    }
  });
};
const formRef = ref()
const info = (row: any) => {
  addDialog({
    title: `告警详情`,
    width: "800px",
    draggable: true,
    fullscreen: false,
    fullscreenIcon: true,
    props: {
      id: row.id
    },
    hideFooter: true,
    closeOnClickModal: false,
    contentRenderer: () => h(alarminfo, { ref: formRef }),
    openAutoFocus({ options, index }) {
      options.props = {
        isLoading: true,
        id: row.id,
        formInline: defaultInfoForm()
      };
      getInfo({ id: row.id }).then(res => {
        if (res.code == 200) {
          options.props.formInline = res.result;
          options.props.id = res.result.deviceId;
        }
        options.props.isLoading = false;
      });
    }
  });
};
setTimeout(() => {
  getTableList()
}, 300);
const DebounceResetting = debounce(resetting, 1000, true);
const DebounceGetTableList = debounce(getTableList, 1000, true);
</script>
